<template>
  <div class='m-courseList'>
    <!-- search -->
    <el-form class='m-courseList-form' :inline='true' label-width="80px">
      <el-form-item label='课程名称'>
        <el-input v-model.trim='name' placeholder="输入课程名称" />
      </el-form-item>
      <el-form-item label='课程状态'>
        <a-select v-model='courseStatus' :options='courseStatusList' />
      </el-form-item>
      <attr-search
        ref='attrSearch' aType='0'
      />
      <div class='btnWrap'>
        <el-button @click='clearSearch'>清空</el-button>
        <el-button @click='searchFun'>搜索</el-button>
        <el-button type='primary' @click='toDetail'>添加课程</el-button>
      </div>
    </el-form>
    <!-- table -->
    <a-table :data='data' :cols='tableKeys'>
      <el-table-column align="center" label="操作" width='240' slot='ahead'>
        <template slot-scope="scope">
          <div class='m-firmDepartment-table-handle'>
            <el-button size='mini' @click='toUpdate(scope.row, "cancel")'>修改</el-button>
            <el-button size='mini' @click='toSignUp(scope.row)'>报名</el-button>
            <el-button size='mini' @click='deleteCourse(scope.row.id)'>删除</el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="目前人数" min-width="100">
        <template slot-scope="scope">
          <div>{{ scope.row.sold || '暂无' }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="价格" min-width="100">
        <template slot-scope="scope">
          <div>{{ scope.row.price || '暂无' }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="状态" min-width="100">
        <template slot-scope="scope">
          <div>{{ scope.row.status | getStatusDesc }}</div>
        </template>
      </el-table-column>
    </a-table>
    <div class='u-pagination'>
      <!-- 分页 -->
      <pagination ref='page' @change='getData' :action='fetchData' :pageSize='20'></pagination>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import AttrSearch from '@/components/business/AttrSearch'

export default {
  name: 'course',

  components: {
    AttrSearch
  },

  data() {
    const filterTime = window.$tools.filterTime
    return {
      tableKeys: [
        { prop: 'name', label: '课程名称', minWidth: '100' },
        { prop: 'class_time', label: '上课时间', minWidth: '100', filter: filterTime },
        { prop: 'title', label: '所属分类', minWidth: '100' }

      ],
      data: [],
      ifRequesting: false,
      selectId: '',
      name: '',
      courseStatusList: [
        { label: '已下架', value: 0 },
        { label: '进行中', value: 1 },
        { label: '已结束', value: 3 }
      ],
      courseStatus: ''
    }
  },

  mounted() {
    this.$refs.page.changePage()
  },

  methods: {
    ...mapMutations(['setTabRoutes']),

    routerPush(type, args) {
      // push 到缓存里
      this.setTabRoutes({ type: 'add', obj: { ...this.getRouterInfoAccordingName(type), ...args } })
    },

    async fetchData(aPageNum, aPageSize) {
      const { name, courseStatus } = this
      const params = { aMerchantId: this.aFirmId, aGoodsType: 1, aPageNum, aPageSize }
      if (name || name === 0) {
        params.aName = name
      }
      if (courseStatus || courseStatus === 0) {
        params.aStatus = courseStatus
      }
      params.aAttrs = this.$refs.attrSearch.getData()
      console.log(params)
      return this.$api.courseGetMines(params)
    },

    getData(data) {
      this.data = data
    },

    clearSearch() {
      this.name = ''
      this.courseStatus = ''
      this.$refs.attrSearch.clear()
      this.searchFun()
    },

    searchFun() {
      this.$refs.page.changePage()
    },

    toDetail() {
      this.routerPush('courseAdd')
      this.$router.push({ name: 'courseAdd' })
    },

    async deleteCourse(id) {
      if (this.ifRequesting) return false
      this.__messageBox({
        title: '你确认要删除该课程吗？',
        successCallback: async () => {
          this.ifRequesting = true
          const { code } = await this.$api.supplyDelete({ aId: id })
          this.ifRequesting = false
          this.$refs.page.changePage()
          return code
        }
      })
    },

    toUpdate({ id }) {
      this.routerPush('courseDetail', { query: { id, type: 'set' } })
      this.$router.push({ name: 'courseDetail', query: { id, type: 'set' } })
    },

    toSignUp({ name, price, id, skus }) {
      console.log(skus)
      const query = { name, price: price || (skus && skus[0] ? skus[0].price : 0), sku_id: id }
      this.routerPush('courseSignUp', { query })
      this.$router.push({ name: 'courseSignUp', query })
    },

    ddd() {}
  },

  filters: {
    getStatusDesc(v) {
      let str = ''
      switch (parseInt(v, 10)) {
      case 1:
        str = '进行中'
        break
      case 3:
        str = '已完成'
        break
      default:
        str = '已下架'
        break
      }
      return str
    }
  }
}
</script>

<style lang='less'>
.m-courseList {
  &-form {
    display: flex;
    flex-wrap: wrap;
    .el-form-item {
      width: 50%;
      display: flex;
      align-items: center;
      margin-right: 0;
      box-sizing: border-box;
      overflow: hidden;
    }
    .el-form-item__content {
      flex: 1;
    }
    .el-select {
      width: 100%;
      flex: 1;
    }
    .btnWrap {
      display: flex;
      width: 100%;
      justify-content: flex-end;
      padding-bottom: 20px;
      padding-right: 5px;
      box-sizing: border-box;
    }
  }
}
</style>